<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <div class="login-container">
      <div class="login-left">
        <el-tabs v-model="activeName">
          <el-tab-pane label="登录" name="first"
            ><el-form ref="loginForm" :model="loginForm" label-width="80px">
              <el-form-item
                label="用户名"
                prop="username"
                :rules="usernameRules"
              >
                <el-input v-model="loginForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" :rules="passwordRules">
                <el-input
                  type="password"
                  v-model="loginForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="handleLogin"
                  >登录</el-button
                >
              </el-form-item>
            </el-form></el-tab-pane
          >
          <el-tab-pane label="注册" name="second"
            ><el-form
              ref="registerForm"
              :model="registerForm"
              label-width="80px"
            >
              <el-form-item
                label="用户名"
                prop="username"
                :rules="usernameRules"
              >
                <el-input v-model="registerForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" :rules="passwordRules">
                <el-input
                  type="password"
                  v-model="registerForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="handleRegister"
                  >注册</el-button
                >
              </el-form-item>
            </el-form></el-tab-pane
          >
        </el-tabs>
      </div>
      <div class="login-right">
        <img src="../../assets/img/Login.png" alt="" draggable="false" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { EventBus } from "@/main";
import { login, Register } from "../../api/login";
import { setToken, setUserId } from "../../utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        password: "",
      },
      activeName: "first",
    };
  },
  methods: {
    handleClose(done) {
      this.$refs.loginForm.resetFields();
      this.$refs.registerForm.resetFields();
      this.dialogVisible = false;
      done();
    },
    handleLogin() {
      // 这里可以添加登录逻辑，例如调用 API 进行登录验证
      login(this.loginForm).then((res) => {
        if (res.data.code === 1) {
          // jwt令牌
          setToken(res.data.data.token);
          // 用户id
          setUserId(res.data.data.userId);
          // 登录成功后关闭对话框
          this.dialogVisible = false;
          // 刷新页面
          window.location.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleRegister() {
      // 表单验证
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 验证通过，执行注册逻辑，例如调用 API 进行注册
          Register(this.registerForm).then((res) => {
            if (res.data.code === 1) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              // jwt令牌
              setToken(res.data.data.token);
              // 用户id
              setUserId(res.data.data.userId);
              // 注册成功后关闭对话框
              this.dialogVisible = false;
              // 刷新页面
              window.location.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          // 验证不通过，不执行注册逻辑，留在当前页面
          console.log("注册失败");
        }
      });
    },
  },
  computed: {
    usernameRules() {
      return [
        { required: true, message: "请输入用户名", trigger: "blur" },
        {
          min: 2,
          max: 7,
          message: "用户名长度在 2 到 7 个字符之间",
          trigger: "blur",
        },
      ];
    },
    passwordRules() {
      return [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, message: "密码长度不能少于 6 位", trigger: "blur" },
      ];
    },
  },
  created() {
    EventBus.$on("notLoggedIn", () => {
      this.dialogVisible = true;
    });
  },
};
</script>

<style lang="less" scoped>
.el-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  display: flex;
  justify-content: space-around; /* 控制左右布局 */
  align-items: center;
}

.login-left {
  flex: 1; /* 左侧占据剩余空间 */
}

.login-right {
  flex: 1; /* 右侧占据剩余空间 */
}

.login-right img {
  width: 100%; /* 图片宽度占满容器 */
  max-width: 300px; /* 最大宽度限制 */
  height: auto; /* 高度自适应 */
}
</style>


<style scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
::v-deep .el-tabs__nav {
  margin-left: 45px !important;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
</style>
